<!DOCTYPE html>
<html>

{include file='public/header'}
<style>
    .layui-inline{
        margin-bottom: 5px;
    }
    .layui-input-block{
        margin-left: 0px;
    }
    .layui-input{
        width: 200px;
    }
    .layui-table-page{
        display: none;
    }
</style>
<body>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="javascript:void(0)">首页</a>
            <a href="javascript:void(0)">投放总览</a>
            <a><cite>抖音任务台按月统计</cite></a>
        </span>
        <a class="layui-btn layui-btn-small" id="reload" title="刷新">
            <i class="layui-icon" style="line-height:30px"><i class="iconfont">&#xe6aa;</i></i>
        </a>
    </div>
    <div class="x-body">
        <div class="layui-row">
            <form class="layui-form" lay-filter="formData" id = 'handle-form'>
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">选择小程序：</label>
                    <div id="pVideo" class="layui-input-inline" style="width:200px;flex:1"></div>
                </div>
                <!-- <div class="layui-inline">
                    <label class="layui-form-label w-auto">计费日期：</label>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" class="layui-input" name="billing_date" placeholder="请选择计费日期" id="billing_date">
                    </div>
                </div> -->
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">统计时间：</label>
                    <div id="time" style="display: flex;align-items: center;">
                        <div class="layui-input-inline" style="margin-right:10px">
                            <input type="text" autocomplete="off" name="start_time" id="start_date" class="layui-input"
                                placeholder="开始日期">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline">
                            <input type="text" autocomplete="off" name="end_time" id="end_date" class="layui-input"
                                placeholder="结束日期">
                        </div>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">撮合中介key：</label>
                    <div id="pClientList1" class="layui-input-inline" style="width:200px;flex:1"></div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">主播抖音号：</label>
                    <div id="pClientList2" class="layui-input-inline" style="width:200px;flex:1"></div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">第三方小程序：</label>
                    <div id="pClientList3" class="layui-input-inline" style="width:200px;flex:1"></div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="searchListTaskVideo">搜索</button>
                    <button type="reset" id="resetList" class="layui-btn layui-btn-primary">重置</button>
                    <button type="button" lay-filter="leading-out" id="leading-out" class="layui-btn ">导出全部数据</button>
                </div>
            </form>
        </div>
        <table id="getTaskVideo" lay-filter="getTaskVideo"></table>
        <!-- <div class="layui-btn-group">
            <button type="button" id="up" class="layui-btn layui-btn-primary layui-btn-sm layui-btn-disabled" onclick="getData('up')">上一页</button>
            <button type="button" id="next" class="layui-btn  layui-btn-primary layui-btn-sm layui-btn-disabled" onclick="getData('next')">下一页</button>
        </div> -->
    </div>
    <script type="text/html" id="tbBar">
        <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="leading">导出数据</a>
        <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
    </script>
    <script>
        let page = 1;

        let params = {
            elem: '#getTaskVideo'
            , toolbar: true
            , totalRow:true
            , url: '/admin/tiktok/getTaskVideoMonth' //数据接口
            , id: 'getTaskVideo'
            , page: {
                curr:page
            }
            , limit:10000
            , cols: [[ //表头
                { field: 'name', title: '小程序名称',totalRowText: '合计：', align:'center' }
                , { field: 'date', title: '日期<i class="layui-icon iconfont icon-lytishi1" id="Datetime"></i>', align:'center',  }
                , { field: 'num', title: '结算金额统计<i class="layui-icon iconfont icon-lytishi1" id="Num"></i>',  align:'center', totalRow: '{{= d.TOTAL_NUMS.toFixed(2) }}' }
                , { field: 'numtwo', title: '总金额统计<i class="layui-icon iconfont icon-lytishi1" id="NumTwo"></i>',  align:'center', totalRow: '{{= d.TOTAL_NUMS.toFixed(2) }}' }
                , { field: 'client_name', title: '撮合中介名称<i class="layui-icon iconfont icon-lytishi1" id="ClientName"></i>',  align:'center' }
            , { toolbar: '#tbBar', title: '导出数据', fixed:'right', width: 240,align:'center' }
            ]]
            ,done: function(res, curr, count){
                tips('#Num','#Num','BillingGMV1d为结算金额')
                tips('#Datetime','#Datetime','计费日期')
                tips('#ClientName','#ClientName','撮合中介，可归因到的撮合中介的应用名称。若不归属于任何一个撮合中介，则为空')
                tips('#NumTwo','#NumTwo','GMV1d为计算金额')
                if(res.data.length == 15){
                    $("#next").removeClass('layui-btn-disabled')
                }
                if(page == 1){
                    $("#up").addClass('layui-btn-disabled')
                }
                if(res.data.length != 15 && page != 1){
                    $("#next").addClass('layui-btn-disabled')
                }
            }
            ,parseData:function (res) { //res 即为原始返回的数据.
                delDisabled()
                if(res.code == 200){
                    return {
                        "data": res.data, //解析数据列表
                        "code": res.code, //解析接口状态
                        'count':0//解析数据长度
                    };
                }else{
                    layer.msg(res.message,{icon:5,time:1000});
                    return {
                        "data": [], //解析数据列表
                        "code": 200, //解析接口状态
                        'count':0//解析数据长度
                    };
                }
            },
        }
        tableList(params)
        setDisabled()

        layui.use(['laydate','table','form'], function () {
            var table = layui.table;
            var laydate = layui.laydate;
            var form = layui.form;
            //日期范围
            laydate.render({
                elem: '#time'
                , range: ['#start_date', '#end_date']
                , format: 'yyyy-MM-dd'
            });

            laydate.render({
                elem: '#billing_date' //指定元素
            });

            layui.use('table', function () {
                var table = layui.table;
                table.on('tool(getTaskVideo)', function (obj) {
                    var event = obj.event;
                    let { id,start_time,end_time,client_key,douyin_id ,third_appid} = form.val("formData")
                    if (event === 'leading') {
                        derive('/admin/tiktok/monthLeadingOut',`start_time=${start_time}&end_time=${end_time}&billing_date=${obj.data.date}&id=${id}&client_key=${client_key}&douyin_id=${douyin_id}&third_appid=${third_appid}`)
                    }
                    if (event === 'detail') {
                        x_admin_show('查看详情', `./taskTiktok.html?id=${id}&start_time=${start_time}&end_time=${end_time}&billing_date=${obj.data.date}&id=${id}&client_key=${client_key}&douyin_id=${douyin_id}&third_appid=${third_appid}`, 1400, 800,null);
                    }
                });
            });

            form.on('submit(searchListTaskVideo)', function(data){
                params.where = data.field;
                if(!params.where.id){
                    layer.msg('请先选择小程序', {icon: 5});
                    return false
                }
                tableList(params)
                setDisabled()
                return false
            });
        });
        $("#leading-out").click(function() {
            var data = $('#handle-form').serialize();
            derive('/admin/tiktok/monthLeadingOut',data)
        });
        let selectVideo = {
            url: '/admin/applet/select?page=1&limit=10000&type=2',
            selected: [],
            tips: '选择小程序',
            name: 'id',
            field_id: 'id',
            field_Name: 'name',
            elem: '#pVideo'
        }
        selectN(selectVideo)
        let pClientList1 = {
            url: '/admin/tiktok/selectClientList?type=1',
            selected: [],
            tips: '选择撮合中介',
            name: 'client_key',
            field_id: 'dy_key',
            field_Name: 'name',
            elem: '#pClientList1'
        }
        selectN(pClientList1)
        let pClientList2 = {
            url: '/admin/tiktok/selectClientList?type=2',
            selected: [],
            tips: '选择主播抖音号',
            name: 'douyin_id',
            field_id: 'dy_key',
            field_Name: 'name',
            elem: '#pClientList2'
        }
        selectN(pClientList2)
        let pClientList3 = {
            url: '/admin/tiktok/selectClientList?type=3',
            selected: [],
            tips: '选择第三方小程序',
            name: 'third_appid',
            field_id: 'dy_key',
            field_Name: 'name',
            elem: '#pClientList3'
        }
        selectN(pClientList3)

        function getData(type){
            if($('#'+type).hasClass('layui-btn-disabled')) return;
            if(type == 'up'){
                $("#next").removeClass('layui-btn-disabled')
                page --;
            }else{
                $("#up").removeClass('layui-btn-disabled')
                page ++
            }
            params.page.curr = page;
            tableList(params)
        }
        
        function setDisabled(){
            $('.layui-form').find('button').each(function(index,item){
                if($(item).attr('lay-filter') == 'searchListTaskVideo' || $(item).attr('lay-filter') == 'leading-out'){
                    $(item).attr('disabled',true)
                    $(item).addClass('layui-btn-disabled')
                    if($(item).attr('lay-filter') == 'searchListTaskVideo'){
                        $(item).html('<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>搜索')
                    }else{
                        $(item).html('<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>导出全部数据')
                    }
                }
            })
        }
        function delDisabled(){
            $('.layui-form').find('button').each(function(index,item){
                if($(item).attr('lay-filter') == 'searchListTaskVideo' || $(item).attr('lay-filter') == 'leading-out'){
                    $(item).attr('disabled',false)
                    $(item).removeClass('layui-btn-disabled')
                    $('.layui-icon-loading').remove()
                }
            })
        }
    </script>
</body>

</html>